<template>
  <div class="service-chat-main">
    <div class="service-chat-wrap">
      <div class="chat-block">
        <div class="status-bar">
          <div class="status-menus">
            <el-dropdown>
              <span class="flex-center">
                <svg-icon icon-class="sonline"/>
                <span style="font-size: 12px;margin-left: 8px;">上班</span>
                <i class="el-icon-caret-bottom el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <svg-icon icon-class="sonline"/>
                  <span style="font-size: 12px;margin-left: 8px;">上班</span>
                </el-dropdown-item>
                <el-dropdown-item>
                  <svg-icon icon-class="leave"/>
                  <span style="font-size: 12px;margin-left: 8px;">离开</span>
                </el-dropdown-item>
                <el-dropdown-item>
                  <svg-icon icon-class="offline"/>
                  <span style="font-size: 12px;margin-left: 8px;">休息</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span class="extra">客户分配中</span>
          </div>
          <div class="menus-action">
            <div class="action-icon">
              <svg-icon icon-class="service-user"/>
            </div>
            <div class="action-icon" @click.stop="showSearch = !showSearch">
              <svg-icon icon-class="service-serach"/>
            </div>
            <div class="action-icon">
              <svg-icon icon-class="service-top"/>
            </div>
          </div>
        </div>
        <div class="talk-container">
          <div class="search-bar" v-if="showSearch">
            <el-input class="search-input" size="small" placeholder="输入好友昵称/备注/姓名或群名称" suffix-icon="el-icon-search" />
          </div>
          <div class="talk-head">
            <div class="title">
              我的对话<span class="ceiling">(0/上限0)</span>
            </div>
            <el-dropdown v-if="activeIndex === 0">
              <span class="flex-center">
                <span style="font-weight:600;margin-left: 8px;">全部消息</span>
                <i class="el-icon-caret-bottom el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>全部消息</el-dropdown-item>
                <el-dropdown-item>私聊</el-dropdown-item>
                <el-dropdown-item>群聊</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="talk-msg-list">
            <div class="epmty-content">
              <img class="empty-conver" src="@/assets/images/empty1.png" />
              <div class="empty-text">暂无对话</div>
            </div>
            <!-- <div class="table-user-list" v-if="activeIndex === 1">
              <div class="table-user-head">
                <div class="title">
                  挂起暂不处理
                  <span class="count">(0)</span>
                </div>
                <i class="el-icon-close" style="cursor: pointer;" @click.stop="onCloseFooterModal"></i>
              </div>
              <div class="talk-msg-list">
                <div class="epmty-content">
                  <img class="empty-conver" src="@/assets/images/empty1.png" />
                  <div class="empty-text">暂无对话</div>
                </div>
              </div>
            </div>
            <div class="table-user-list" v-if="activeIndex === 2">
              <div class="table-user-head">
                <div class="title">
                    排队中
                  <span class="count">(0)</span>
                  <el-dropdown>
                    <span class="flex-center">
                      <span style="font-weight:600;margin-left: 8px;">全部消息</span>
                      <i class="el-icon-caret-bottom el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>全部消息</el-dropdown-item>
                      <el-dropdown-item>私聊</el-dropdown-item>
                      <el-dropdown-item>群聊</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
                <i class="el-icon-close" style="cursor: pointer;" @click.stop="onCloseFooterModal"></i>
              </div>
              <div class="talk-msg-list">
                <div class="epmty-content">
                  <img class="empty-conver" src="@/assets/images/empty1.png" />
                  <div class="empty-text">暂无对话</div>
                </div>
              </div>
            </div>
            <div class="table-user-list" v-if="activeIndex === 3">
              <div class="table-user-head">
                <div class="title">
                  留言
                  <span class="count">(0)</span>
                  <el-dropdown>
                    <span class="flex-center">
                      <span style="font-weight:600;margin-left: 8px;">全部消息</span>
                      <i class="el-icon-caret-bottom el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>全部消息</el-dropdown-item>
                      <el-dropdown-item>私聊</el-dropdown-item>
                      <el-dropdown-item>群聊</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <el-button
                    type="warning"
                    plain
                    size="small"
                    style="margin-left: 20px;"
                    @click.stop="visibleDialog = true"
                  >
                    批量接入
                  </el-button>
                </div>
                <i class="el-icon-close" style="cursor: pointer;" @click.stop="onCloseFooterModal"></i>
              </div>
              <div class="talk-msg-list">
                <div class="epmty-content">
                  <img class="empty-conver" src="@/assets/images/empty1.png" />
                  <div class="empty-text">暂无对话</div>
                </div>
              </div>
            </div>
            <div class="table-user-list" v-if="activeIndex === 4">
              <div class="table-user-head">
                <div class="title">
                  结束
                  <span class="count">(0)</span>
                </div>
                <div style="color: #878898;">
                  <i class="el-icon-delete-solid" style="cursor: pointer;margin-right: 10px;"></i>
                  <i class="el-icon-close" style="cursor: pointer;" @click.stop="onCloseFooterModal"></i>
                </div>
              </div>
              <div class="talk-msg-list">
                <div class="epmty-content">
                  <img class="empty-conver" src="@/assets/images/empty1.png" />
                  <div class="empty-text">暂无对话</div>
                </div>
              </div>
            </div> -->
          </div>
          <div class="footer-table-list">
            <div class="tab-item" @click.stop="checkFooterStatus(1)">
              <span class="title">挂起</span>
              <span class="num">(0)</span>
            </div>
            <div class="tab-item" @click.stop="checkFooterStatus(2)">
              <span class="title">排队</span>
              <span class="num">(0)</span>
            </div>
            <div class="tab-item" @click.stop="checkFooterStatus(3)">
              <span class="title">留言</span>
              <span class="num">(0)</span>
            </div>
            <div class="tab-item" @click.stop="checkFooterStatus(4)">
              <span class="title">结束</span>
              <span class="num">(0)</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="service-chat-window-wrap">
      <div class="epmty-content" style="margin-top: 300px;">
        <img class="empty-conver" src="@/assets/images/empty1.png" />
        <div class="empty-text">暂无数据</div>
      </div>
    </div>
    <!-- 选择自己的工作状态  -->
    <WorkStatus :visible.sync="showwork"  />
    <BatcImportDialog :visible="visibleDialog" @handCloseDialog="onHandleCloseDialog"/>
  </div>
</template>
<script>
import BatcImportDialog from '../components/BatcImportDialog.vue'
import WorkStatus from '../components/WorkStatus.vue'
export default {
  data() {
    return {
      visibleDialog: false,
      activeIndex: 0,
      showSearch: false,
      showwork:true
    }
  },
  components: {
    BatcImportDialog,
    WorkStatus
  },
  methods: {
    checkFooterStatus(index) {
      this.activeIndex = index
    },
    onCloseFooterModal() {
      this.activeIndex = 0
    },
    onHandleCloseDialog() {
      this.visibleDialog = false
    }
  },
}
</script>
<style lang="scss" scoped>
.service-chat-main {
  display: flex;
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-x: hidden;
  background: #fafafa;
  .service-chat-wrap {
    width: 320px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    .chat-block {
      width: 320px;
      background: #fff;
      display: flex;
      flex-direction: column;
      flex: 1 1;
      height: 100%;
      .status-bar {
        height: 46px;
        padding: 7px 16px;
        border-bottom: 1px solid #e9e9e9;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .status-menus {
          line-height: 32px;
          font-size: 12px;
          display: flex;
          align-items: center;
          color: #555666;
          .flex-center {
            display: flex;
            align-items: center;
          }
          .extra {
            margin-left: 20px;
            color: #888999;
          }
        }
        .menus-action {
          display: flex;
          align-items: center;
          .action-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 5px;
            color: #888999;
            background: rgba(0, 0, 0, .05);
            border-radius: 2px;
            cursor: pointer;
          }
        }
      }
      .talk-container {
        flex: 1 1;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        .search-bar {
          height: 46px;
          line-height: 46px;
          padding: 0 16px;
          border-bottom: 1px solid #e5e5e5;
        }
        .talk-head {
          font-size: 14px;
          padding: 15px;
          margin: 0;
          font-weight: 400;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .title {
            color: #222333;
            .ceiling {
              color: #888999;
              margin-left: 5px;
            }
          }
        }
        .talk-msg-list {
          position: relative;
          flex: 1 1;
          overflow: hidden;
          .table-user-list {
            position: absolute;
            top: 0;
            width: 100%;
            bottom: 0;
            z-index: 5;
            display: flex;
            background: #fff;
            flex-direction: column;
            .table-user-head {
              font-size: 14px;
              padding: 15px;
              margin: 0;
              font-weight: 400;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .title {
                color: #222333;
              }
              .count {
                color: #888999;
                margin-left: 5px;
              }
            }
          }
        }
        .footer-table-list {
          height: 60px;
          border-top: 1px solid #f0f0f0;
          background: #fff;
          display: flex;
          position: relative;
          z-index: 10;
          .tab-item {
            flex: 1 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            .title {
              font-weight: 400;
              color: #222333;
              margin: 0;
              font-size: 14px;
            }
            .num {
              color: #888999;
              font-size: 12px;
              margin: 2px 0 0;
            }
          }
        }
      }
    }
  }
  .service-chat-window-wrap {
    flex: 1 1;
  }
  .epmty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
    .empty-conver {
      width: auto;
      height: 90px;
    }
    .empty-text {
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
      line-height: 22px;
      margin-top: 10px;
    }
  }
}
</style>